<template>
  <div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <span>数据展示</span>
        <el-button class="pull-right" size="small" type="text" style="padding: 0;" @click="showJson">JSON</el-button>
      </div>
      <div class="panel-body">
        <div v-if="keyRow.key" class="key-info">
          <div class="text text-more" :title="keyRow.key">
            <el-button size="small" icon="el-icon-refresh" type="text" class="" @click="loadAllData" />
            <el-button size="small" icon="el-icon-document-copy" type="text" class="margin-right" @click="copyKey(keyRow.key,$event)" />
            <span>{{ keyRow.key }} </span>
          </div>
          <div class="margin-bottom">
            <span>数据量: {{ keyRow.length }}</span>
            <span class="margin-left margin-right">类型: {{ keyRow.type }}</span>
            <el-checkbox v-model="input.all" @change="loadAllData">所有数据</el-checkbox>
          </div>
        </div>

        <template v-if="keyRow.type === 'string'">
          <string ref="loadData_string" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam" />
        </template>
        <template v-if="keyRow.type === 'hash'">
          <hash ref="loadData_hash" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam" />
        </template>
        <template v-if="keyRow.type === 'list'">
          <list ref="loadData_list" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam" :all="input.all" />
        </template>
        <template v-if="keyRow.type === 'set'">
          <set ref="loadData_set" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam" :all="input.all" />
        </template>
        <template v-if="keyRow.type === 'zset'">
          <zset ref="loadData_zset" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam" :all="input.all" />
        </template>
      </div>
    </div>

    <!-- json 格式化展示 -->
    <el-drawer
      :with-header="false"
      :visible.sync="drawer.visible"
      direction="rtl"
    >
      <json-editor :json="drawer.json" />
    </el-drawer>
  </div>
</template>

<script>
import string from '@/views/monitor/redis/type/string'
import list from '@/views/monitor/redis/type/list'
import set from '@/views/monitor/redis/type/set'
import hash from '@/views/monitor/redis/type/hash'
import zset from '@/views/monitor/redis/type/zset'
import clip from '@/utils/clipboard'
import JsonEditor from '@/components/JsonEditor'

export default {
  name: 'Datashow',
  components: { JsonEditor, string, list, set, hash, zset },
  props: {
    keyRow: {
      type: Object,
      required: true
    },
    connParam: {
      type: Object,
      required: true
    },
    serializerParam: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      input: { all: false },
      drawer: {
        visible: false,
        json: null
      }
    }
  },
  watch: {
    keyRow: {
      deep: true,
      handler(val, oldVal) {
        this.loadAllData()
      }
    }
  },
  methods: {
    showJson() {
      if (this.keyRow.key) {
        const component = this.$refs['loadData_' + this.keyRow.type]
        const data = component.getData()
        try {
          if (typeof (data) === 'object') {
            this.drawer.json = data
          } else {
            this.drawer.json = JSON.parse(data)
          }

          this.drawer.visible = true
        } catch (e) {
          this.$message(e.toString())
          console.log(data)
        }
      }
    },
    copyKey(text, event) {
      clip(text, event)
    },
    loadAllData() {
      // console.log('loadData:'+this.keyRow.key+":"+this.keyRow.type)
      if (this.keyRow.key && this.keyRow.type) {
        this.$nextTick(() => {
          const component = this.$refs['loadData_' + this.keyRow.type]
          if (component) {
            component.loadData()
          }
        })
      }
    }
  }
}
</script>
